<template>
  <div>
    <b-alert
      :show="dismissCountDown"
      dismissible
      variant="warning"
      @dismissed="dismissCountDown = 0"
      @dismiss-count-down="countDownChanged"
    >
      <h4 class="alert-heading">{{ tilMsg }}</h4>
      <p>请等待 {{ dismissCountDown }} 秒...</p>
      <b-progress
        variant="warning"
        :max="dismissSecs"
        :value="dismissCountDown"
        height="4px"
      />
    </b-alert>

    <div v-if="dismissCountDown === 0">
      <b-form @submit="onSubmit" @reset="onReset">
        <!-- <b-form-group
          id="exampleInputGroup2"
          label="姓名:"
          label-for="exampleInput2"
        >
          <b-form-input
            id="exampleInput2"
            v-model.trim="form.name"
            type="text"
            required
            maxlength="10"
            placeholder="不一定用真名"
          />
        </b-form-group> -->

        <b-form-group
          id="exampleInputGroup1"
          label="留言:"
          label-for="exampleInput1"
          description="您可以顺便留下联系方式."
        >
          <b-form-textarea
            id="textarea"
            v-model.trim="form.msg"
            placeholder="随便写点啥..."
            required
            rows="8"
            maxlength="1500"
            max-rows="15"
          />
        </b-form-group>

        <b-button type="submit" variant="primary">提 交</b-button>
        <b-button type="reset" variant="danger">清 空</b-button>
      </b-form>
    </div>
  </div>
</template>

<script>
import { addMsg } from "~/assets/services/api";
import Validate from "~/assets/utils/validate";
export default {
  name: "Index",
  data() {
    return {
      form: {
        name: "PC匿名用户",
        msg: "",
        type: 1
      },
      dismissSecs: 5,
      dismissCountDown: 0,
      tilMsg: "提交成功！"
    };
  },
  methods: {
    countDownChanged(dismissCountDown) {
      this.dismissCountDown = dismissCountDown;
    },
    onSubmit(evt) {
      // 提交
      evt.preventDefault();
      if (
        Validate.isvalidStr(this.form.name) ||
        Validate.isvalidStr(this.form.msg)
      ) {
        this.$bvToast.toast(`不能输入特殊字符`, {
          title: "提示",
          toaster: "b-toaster-top-center",
          variant: "danger"
        });
        return;
      }
      addMsg(this.form).then(() => {
        this.dismissCountDown = this.dismissSecs;
        this.clearForm();
      });
    },
    onReset(evt) {
      evt.preventDefault();
      /* Reset our form values */
      this.clearForm();
    },
    clearForm() {
      this.form.msg = "";
      this.form.name = "";
    }
  }
};
</script>

<style scoped></style>
